<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width,initial-scale=1" name="viewport" />
    <link rel="icon" href="./md.png" />
    <title>markdown editor</title>
    <style>
      .md_container {
        width: 800px !important;
        margin: 40px auto;
        /* margin-top: 600px; */
      }

      body {
        /* background-color: #222226; */
      }

      .text {
        width: 100%;
        /* height: 200px; */
        border: 1px solid red;
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <button id="getValueBtn">getValue1</button>
    <button id="changeUserListBtn">changeUserListBtn</button><br /><button
      id="callMeBtn"
      style="margin-top: 16px"
    >
      Transfer
    </button>
    <script src="./markdown-editor.js"></script>
    <script>
      let upperList = [];
      // setTimeout(() => {
      try {
        const ee = new MdEditor({
          el: "#app", // required
          value: `\`\`\`java
      #include "stdio.h"
      void main()
      {
          /*
              完数：所有的因子相加等于这个数本身
              6=1+2+3
          */
          int i,j,a,b,c;
          printf("1000以内的完数如下：\n");
          for(i=6;i<=1000;i++)
          {
                 a=0;
                 //求i对应的所有的因子
              for(j=2;j<=i;j++)
              {
                  if(i%j==0)
                  {
                      a+=i/j;
                  }
              }
              if(i==a){
                  //该循环语句的作用就是打印结果
                  for(j=2;j<=i;j++)
                  {
                      if(i%j==0)
                      {
                          if(i==j){
                              printf("%d",i/j);
                          }else{
                              printf("%d+",i/j);
                          }
                      }
                  }
                  printf("=%d\n",i);
              }
          }
      }
      \`\`\`
              `,
          //         value: `
          // ![pic](https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg=40x40)
          //         `,
          //         value: `
          // const aaa = $(".left .title").hover(function() {
          //   aaa.remove()
          // })
          //         `,
          value:
            "## edswgdfgdfgdfg\n**dfgdfgdfg**\n_ergdfgdfg_\n> ergergdfg\n```\nwefgdfsfdgdf\n```\n- efwefsdfsdf\n\n\nsdgfdfgdfgdfg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg",
          value:
            "[link](https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg)",
          // value: "当前问题已结题，不再开放新的回答。",
          value: "(http://www.baidu.com)\n（http://www.baidu.com）",
          value: "",
          disabled: false,
          themeOptions: {
            dark: false,
            borderColorActive: "#409eff",
            textColor: "#303030",
            // textColorActive: "#000",
            codeTheme: "atom-one-dark"
          },
          height: 400,
          // rows: 'auto',
          // height: 40,
          toolsOptions: {
            call: true,
            format: true,
            bold: true,
            italic: true,
            quote: true,
            code: true,
            link: true,
            ul: true,
            ol: true,
            task: true,
            table: true,
            img: true,
            file: true,
            test1: true,
            help: true,
            fullScreen: true
          },
          zIndex: 7000,
          maxLength: 6000,
          showWordLimit: true,
          // height: "600",

          filePathRule: /^https:\/\/ss2\.bdstatic\.com/,
          canPreview: true,
          // canAttachFile: true,
          placeholder: "请输入内容",
          // throttle: 1000,
          // onFocus: function(res) {
          //   console.log(res);
          // },
          onLoad: function(res) {
            // console.log("load", res);
          },
          onBlur: function(res) {
            // console.log(res);
          },
          onInput: function(res) {
            // console.log("input", res);
          },
          onChange: function(res) {
            // console.log("change", res);
          },
          onSubmit: function(res) {
            // console.log(res);
          },
          onUpload: function(file, type, callback) {
            debugger;
            if (type === "video" || type === "img") {
              let time = 0;
              const timeObj = setInterval(() => {
                time++;
                if (time >= 100) {
                  callback("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
                  clearInterval(timeObj);
                  return;
                }
                callback(time);
              }, 20);
              return;
            }
            new Promise((res, rej) => {
              setTimeout(() => {
                res(file);
              }, 1000);
            }).then(res => {
              var reader = new FileReader();
              reader.readAsDataURL(res);
              reader.onload = () => {
                callback(reader.result);
              };
            });
          },
          renderLinks: function(val, callback) {
            setTimeout(() => {
              callback(
                val.map(item => {
                  item.title = "如何搭建一个完整的vue生态";
                  item.description =
                    "相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。";
                  item.icon = "https://g.csdnimg.cn/static/logo/favicon32.ico";
                  return item;
                })
              );
            }, 0);
          },
          // queryUserList: function (val, callback) {
          //   console.log('val',val);
          //   const list = [
          //     {
          //       id: 1,
          //       nickname: "cpongo1",
          //       username: "cpongo1",
          //       url: "https://weibo.com/u/5492443184",
          //       avatar:
          //           "https://img2.baidu.com/it/u=2380211986,3979961921&fm=26&fmt=auto&gp=0.jpg",
          //     },
          //     {
          //       id: 2,
          //       nickname: "CPongo2",
          //       username: "cpongo2",
          //       url: "https://weibo.com/u/5492443184",
          //       avatar:
          //           "https://img0.baidu.com/it/u=777620324,2343967729&fm=26&fmt=auto&gp=0.jpg",
          //     },
          //     {
          //       id: 3,
          //       nickname: "马奎斯",
          //       username: "cpongo3",
          //       url: "https://weibo.com/u/5492443184",
          //       avatar:
          //           "https://img2.baidu.com/it/u=1297316011,1869565258&fm=26&fmt=auto&gp=0.jpg",
          //     },
          //     {
          //       id: 4,
          //       nickname: "王一博",
          //       username: "cpongo4",
          //       url: "https://weibo.com/u/5492443184",
          //       avatar:
          //           "https://img2.baidu.com/it/u=298051053,3773223854&fm=26&fmt=auto&gp=0.jpg",
          //     },
          //     {
          //       id: 5,
          //       nickname: "王俊凯",
          //       username: "cpongo5",
          //       url: "https://weibo.com/tfwangjunkai",
          //       avatar:
          //           "https://img1.baidu.com/it/u=2378425879,2273515018&fm=26&fmt=auto&gp=0.jpg",
          //     },
          //     {
          //       id: 6,
          //       nickname: "易烊千玺",
          //       username: "cpongo6",
          //       url: "https://weibo.com/tfyiyangqianxi",
          //       avatar:
          //           "https://img0.baidu.com/it/u=2227200088,1939721201&fm=26&fmt=auto&gp=0.jpg",
          //     },
          //     {
          //       id: 7,
          //       nickname: "白敬亭",
          //       username: "cpongo7",
          //       url: "https://weibo.com/u/2112496475",
          //       avatar:
          //           "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg",
          //     },
          //   ];
          //
          //   callback(list);
          // },
          queryUserList: function(val) {
            const list = upperList;
            let userList;
            if (!val) {
              userList = list;
            } else {
              userList = list.filter(item => {
                return item.nickname.toLowerCase().includes(val.toLowerCase());
              });
            }
            ee.updateUserList(userList);
          },
          userVerify: function(
            startVerify,
            getNewUserList,
            setCanPreviewClick
          ) {
            console.log("外部触发 userVerify---", startVerify);
            if (startVerify) {
              // 这里去调接口
              setCanPreviewClick(false);
              setTimeout(() => {
                const userList = [
                  {
                    id: 7,
                    nickname: "白敬亭",
                    username: "cpongo7",
                    url: "https://weibo.com/u/2112496475",
                    avatar:
                      "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
                  },
                  {
                    id: 8,
                    nickname: "nevins",
                    username: "nevins",
                    url: "https://weibo.com/u/nevins",
                    avatar:
                      "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
                  }
                ];
                getNewUserList(userList);
                setCanPreviewClick(true);
              }, 500);
            }
          }
        });

        // newAdd
        const callMeBtn = document.querySelector("#callMeBtn");
        const getValueBtn = document.querySelector("#getValueBtn");
        const changeUserListBtn = document.querySelector("#changeUserListBtn");

        let tempValue = "";
        getValueBtn.addEventListener("click", () => {
          console.log("当前输入", ee.getValue());
          tempValue = ee.getValue();
        });
        callMeBtn.addEventListener("click", () => {
          const list = [
            {
              id: 7,
              nickname: "白敬亭",
              username: "cpongo7",
              url: "https://weibo.com/u/2112496475",
              avatar:
                "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
            },
            {
              id: 8,
              nickname: "nevins",
              username: "nevins",
              url: "https://weibo.com/u/nevins",
              avatar:
                "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
            }
          ];
          console.log("转换结果", ee.transferMarkdown(tempValue.text, list));
        });
        changeUserListBtn.addEventListener("click", () => {
          upperList = [
            {
              id: 7,
              nickname: "白敬亭",
              username: "cpongo7",
              url: "https://weibo.com/u/2112496475",
              avatar:
                "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
            },
            {
              id: 8,
              nickname: "nevins",
              username: "nevins",
              url: "https://weibo.com/u/nevins",
              avatar:
                "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
            }
          ];
        });
      } catch (e) {
        console.error("initial error", e);
      }
      // }, 3000);
      //       ee.registerTools([
      //         {
      //           name: "test",
      //           icon:
      //             "https://img1.baidu.com/it/u=1522221441,2900868227&fm=26&fmt=auto&gp=0.jpg",
      //           tip: "自定义的按钮",
      //           click: function() {}
      //         }
      //       ]);
      //       function test() {
      //         return ee.getVideoList();
      //       }
      //       document.querySelector("#a").onclick = async function() {
      //         ee.setValue(`
      // # 一级标题
      // ## 二级标题
      // ### 三级标题
      // #### 四级标题
      // #### 四级标题2四级标题2四级标题2四级标题2四级标题2四级标题2四级标题2四级标题2
      // #### 四级标题3
      // #### 四级标题4
      // ### 三级标题2
      // ### 三级标题3
      // ## 二级标题2
      // ## 二级标题3
      // ## 二级标题4
      // ## 二级标题5
      // ### 三级标题4

      // [toc]

      //         `);

      //         // ee.disable();
      //         // ee.getVideoList(list => {
      //         //   console.log("list", list);
      //         // });
      //       };
      //       document.querySelector("#b").onclick = function() {
      //         ee.enable();
      //       };
    </script>
  </body>
</html>
